<script setup lang="ts">
//
import {ref} from "vue"

const cover=ref( 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
const avatar=ref( 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png')
// const extraIcon=ref({
// 	color: '#4cd964',
// 	size: '22',
// 	type: 'gear-filled'
// })

// const onClick=(e)=>{
// 				console.log(e)
// 			}
const actionsClick=(text)=>{
	uni.showToast({
		title:text,
		icon:'none'
	})
}

</script>

<template>
  <view>
    <!-- 卡片 -->
    <!-- <uni-section title="自定义卡片内容" type="line"> -->
			<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar" >
				<template v-slot:title>
                    <view class="top">
                        <view class="time">2024年 4月</view>
                        <view class="icon">
                            <view class="ru">总充值：1000.00</view>
                            <view class="chu">总消费：600.00</view>
                        </view>
                    </view>
				</template>
                <view class="content">
                    <view class="list" v-for="item in 3" :key="item">
                        <view class="time">4月13日 20：00</view>
                        <view class="ru">+ 50</view>
                    </view>
                    <view class="list" v-for="item in 6" :key="item">
                        <view class="time">4月11日 21：00</view>
                        <view class="chu">- 70</view>
                    </view>
                </view>
			</uni-card>

            <uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar" >
				<template v-slot:title>
					<!-- <uni-list>
						<uni-list-item :show-switch="true" title="自定义标题"/>
					</uni-list> -->
                    <view class="top">
                        <view class="time">2024年 3月</view>
                        <view class="icon">
                            <view class="ru">总充值：1000.00</view>
                            <view class="chu">总消费：600.00</view>
                        </view>
                    </view>
				</template>
                <view class="content">
                    <view class="list" v-for="item in 3" :key="item">
                        <view class="time">4月13日 20：00</view>
                        <view class="ru">+ 50</view>
                    </view>
                    <view class="list" v-for="item in 6" :key="item">
                        <view class="time">4月11日 21：00</view>
                        <view class="chu">- 70</view>
                    </view>
                </view>
			</uni-card>
  </view>
</template>

<style lang="scss" scoped>
.top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    border-bottom: 2px solid #ccc;

    // background-color: #f6f5f5;
    .time{
        font-size: 20px;
    }
   
}
.ru{
    color: #00b26a;
    }
.chu{
    color:#ce3a26;
}
.content{
    .list{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 5px;
        padding-right:10px ;
        // background-color: pink;
        font-size: 16px;
        margin: 5px 0;
    border-bottom: 1px solid #ccc;

    }
}
</style>
